<html>

<head>
    <meta charset="utf-8">
    <title>SPECTER-CORE-SSM 框架</title>
    <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
</head>

<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
    <!-- header -->
    <header>
        <div class="mdui-typo mdui-p-l-5 mdui-text-color-white-text">
            <h1>SPECTER-CORE-SSM 框架说明文档 <small class="mdui-text-color-white-text">V4.0</small></h1>
        </div>
    </header>
    <!-- content -->
    <main class="mdui-container-fluid" style="margin-top: 120px;">
        <div class="mdui-row">
            <div class="mdui-col-xs-8"></div>
            <div class="mdui-col-xs-3">
                <div class="mdui-card">
                    <div class="mdui-card-primary  mdui-p-b-0">
                        <div class="mdui-card-primary-title">用户登录</div>
                    </div>
                    <div class="mdui-card-content">
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">account_circle</i>
                            <label class="mdui-textfield-label">用户名</label>
                            <input class="mdui-textfield-input" type="text" name="username" />
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">lock</i>
                            <label class="mdui-textfield-label">密 码</label>
                            <input class="mdui-textfield-input" type="password" name="password" />
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">textsms</i>
                            <label class="mdui-textfield-label">验证码</label>
                            <input class="mdui-textfield-input" type="text" name="captcha" />
                        </div>
                    </div>
                    <div class="mdui-card-actions mdui-text-right mdui-m-b-3">
                        <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-indigo-accent" id="reset"
                            type="button">重置</button>
                        <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent" id="submit"
                            type="button">登录</button>
                    </div>
                </div><!-- /.mdui-card -->
            </div><!-- /.mdui-col-xs-3 -->
            <div class="mdui-col-xs-1"></div>
        </div><!-- /.mdui-row -->
    </main><!-- /.mdui-container -->
    <!-- footer -->
    <footer>

    </footer>
    <script>
        var $$ = mdui.JQ;
        $$(function () {
            $$("#submit").on("click", function () {
                $$.ajax({
                    method: 'POST',
                    url: './sure/nauth/authorize',
                    dataType: "json",
                    data: {
                        "specter_security_params_loginid": $$("input[name='username']").val(),
                        "specter_security_params_password": $$("input[name='password']").val(),
                        "specter_security_params_captcha": $$("input[name='captcha']").val()
                    },
                    success: function (data) {
                        if (data.meta.success) {
                            console.log(data.data.target);
                            window.location.href = "." + data.data.target;
                        } else {
                            mdui.snackbar(data.meta.message, { position: 'right-top' });
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr);
                        mdui.snackbar("There is an error, please contact the admistrator !", { position: 'right-top' });

                    }
                });
            });

            //获取bing的背景图片
            //https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&pid=hp&uhd=1&uhdwidth=3840&uhdheight=2160

        });
    </script>
    <style>
        body {
            background-image: url('https://cn.bing.com/th?id=OHR.PlutoCrescent_ZH-CN3538488331_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4');
            background-size: cover;
        }
    </style>
</body>

</html>